
import React, {
    Component,
} from 'react';
import {
    StyleSheet,
    Text,
    View,
    Platform,
    Dimensions,
    TouchableOpacity,
    TextInput,
    Image,
    Modal
} from 'react-native';
import Constant from '../../utils/Constant';
import { ToastToUser, ToastToUserOnPosition } from '../../utils/CustomToast';
import { getImgUrl } from '../../utils/ComFunction';
import HttpUtils from "../../utils/HttpUtils";
import HttpUrls from "../../utils/HttpUrls";
import AndroidModule from "../../utils/AndroidConnent";
import Loading from "../../utils/Loading";
import { FlatList } from 'react-native';
import moment from 'moment';

const isIos = Platform.OS == 'ios';

const screenW = Dimensions.get('window').width;
let BarHeight = Constant.statusBarHeight;
const screenH = Dimensions.get('window').height;

export default class SelectOrderPop extends Component {

    constructor(props) {
        super(props);
        this.state = {
            orderList: [],
            type: this.props.type,//0买家消息 1卖家消息
            keyWord:''
        }
    };

    componentDidMount() {
        this.getOrderList();
    }



    closeMsgModal() {
        if (this.props.onClose) {
            this.props.onClose()
        }
    }

    render() {

        return (
            <View style={{
                position: "absolute",
                left: 0,
                top: 0,
                zIndex: 1000,
                backgroundColor: "rgba(0,0,0,0.25)",
                width: screenW,
                height: screenH,
                justifyContent: "center",
                alignItems: "center"
            }}>
                <Modal
                    transparent={true}
                    animationType={'fade'}
                    onRequestClose={() => this.closeMsgModal()}>
                    <View style={styles.container}>
                        <TouchableOpacity
                            style={styles.actContainer}
                            activeOpacity={1}
                            onPress={() => this.closeMsgModal()}>
                        </TouchableOpacity>
                        <View style={styles.framebox}>
                            <View style={styles.titleContainerStyle}>
                                <Text style={styles.titleTextStyle}>请选择想要咨询的订单</Text>

                                <TouchableOpacity
                                    style={styles.closeBtn}
                                    activeOpacity={0.8}
                                    onPress={() => this.closeMsgModal()}>
                                    <Image style={styles.closeImg} source={{ uri: 'icon_close_gray' }}></Image>
                                </TouchableOpacity>
                            </View>

                            <View style={styles.searchContain}>
                                <Image style={styles.searchImg} source={{ uri: 'icon_sc_search' }}></Image>
                                <TextInput
                                    style={styles.searchInput}
                                    placeholder="搜索vin码或车辆名称"
                                    value={this.state.keyWord}
                                    onChangeText={text => this.setState({ keyWord: text })}>

                                </TextInput>

                                <Text style={{ marginHorizontal: 10 }}>|</Text>
                                <TouchableOpacity
                                    onPress={() => {
                                        this.setState({
                                            orderList: []
                                        },function(){
                                            this.getOrderList()
                                        })
                                    }}>
                                    <Text style={styles.searchBtnText}>搜索</Text>
                                </TouchableOpacity>
                            </View>

                            <View style={{ height: 400, width: '90%' }}>
                                <FlatList
                                    data={this.state.orderList}
                                    renderItem={this.renderOrderItem.bind(this)}
                                    keyExtractor={(item, index) => index + ''}
                                    extraData={this.state}>

                                </FlatList>
                            </View>
                        </View>
                        <Loading onRef={(ref) => (this.Loading = ref)} />
                    </View>
                </Modal>
            </View>

        );
    }

    renderOrderItem({ item, index }) {
        return (
            <View style={styles.orderItemContainer}>
                <View style={styles.orderItemTopContain}>
                    <Text style={styles.orderItemVinText}>VIN码：{item.vcode}</Text>
                    <Text style={styles.orderItemVinText}>{moment(item.createTime).format("YYYY-MM-DD HH:mm")}</Text>
                </View>

                <View style={styles.orderItemInfoContain}>
                    <Image style={styles.orderCarImg} source={{uri: getImgUrl(item.carMainPic)}}></Image>

                    <View style={{flex:1,marginStart:5,marginRight:10}}>
                        <Text style={styles.orderCarTitle} numberOfLines={2} ellipsizeMode='tail'>{item.carSeriesName+' '+item.carSpeciesName}</Text>
                        <Text style={styles.orderCarPrice}>￥{(item.tradePrice/10000).toFixed(2)}万</Text>
                    </View>
                    <View style={{alignItems:'center'}}>
                        <Text style={styles.orderStatusText}>{item.orderStatusName}</Text>
                        <TouchableOpacity
                            style={styles.orderSendBtn}
                            onPress={() => {
                                if (this.props.resultCallback) {
                                    this.props.resultCallback(item)
                                }
                            }}>
                            <Text style={styles.orderSendBtnText}>发送</Text>
                        </TouchableOpacity>

                    </View>
                </View>
            </View>
        )
    }


    // 关闭弹框
    closeshowbox = () => {
        if (this.props.onClose) {
            this.props.onClose()
        }
    }

    getOrderList() {
        let url = ''
        if (this.state.type == '0') {//买家消息
            url = HttpUrls.getSellerCarTradeOrderList
        }else{
            url = HttpUrls.getBuyerCarTradeOrderList
        }

        let params = {
            page:1,
            pageSize:100,
            orderStatusList:[101,102,103,104,105,106,110,111,112],
            merchantId:Constant.merchantId,
            keyWord:this.state.keyWord
        }

        HttpUtils.postRequest(url, params)
            .then((result) => {
                if(result.data && result.data.resultList){
                    this.setState({
                        orderList: this.state.orderList.concat(result.data.resultList)
                    })
                }
            })
            .catch((error) => {

            });
    }

}


const styles = StyleSheet.create({

    container: {
        flex: 1,
        backgroundColor: 'rgba(0,0,0,0.5)',
        zIndex: 1000,
    },
    actContainer: {
        flex: 1,
    },
    framebox: {
        position: 'absolute',
        bottom: 0,
        width: '100%',
        backgroundColor: '#f4f4f4',
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'center',
    },
    titleContainerStyle: {
        width: '100%',
        height: 60,
        borderTopLeftRadius: 6,
        borderTopRightRadius: 6,
        justifyContent: 'center',
        alignItems: 'center'
    },
    titleTextStyle: {
        fontSize: 16,
        textAlign: 'center',
        color: '#333333',
        fontWeight: 'bold'
    },
    searchContain: {
        flexDirection: 'row',
        alignItems: 'center',
        width: '90%',
        height: 40,
        backgroundColor: '#ffffff',
        borderRadius: 6,
        marginBottom: 12,
        paddingHorizontal: 12
    },
    searchImg: {
        width: 16,
        height: 16,
        marginRight: 12
    },
    searchInput: {
        flex: 1
    },
    searchBtnText: {
        fontSize: 14,
        color: '#333333'
    },
    orderItemContainer: {
        flexDirection: 'column',
        alignItems: 'center',
        height: 120,
        backgroundColor: '#ffffff',
        borderRadius: 6,
        marginBottom: 12,
        paddingHorizontal: 12
    },
    orderItemTopContain: {
        flexDirection: 'row',
        alignItems: 'center',
        width: '100%',
        height: 48,
        justifyContent: 'space-between'
    },
    orderItemVinText: {
        fontSize: 14,
        color: '#999999',

    },
    orderItemInfoContain: {
        flexDirection: 'row',
        alignItems: 'center',
        width: '100%',

    },
    orderCarImg: {
        width: 50,
        height: 50,
        backgroundColor: '#f4f4f4',
        borderRadius:4
    },
    orderCarTitle: {
        fontSize: 14,
        color: '#333333'
    },
    orderCarPrice: {
        fontSize: 12,
        color: '#333333',
        fontWeight:'bold',
        marginTop:5
    },
    orderStatusText: {
        fontSize: 12,
        color: '#999999'
    },
    orderSendBtn: {
        width: 60,
        height: 25,
        backgroundColor: '#FFEF3A',
        borderRadius: 25,
        justifyContent: 'center',
        alignItems: 'center',
        marginTop:15
    },
    orderSendBtnText: {
        fontSize: 12,
        color: '#333333'
    },
    closeImg:{
        width:20,
        height:20
    },
    closeBtn:{
        width:40,
        height:'100%',
        position:'absolute',
        justifyContent:'center',
        alignItems:'center',
        right:10
    }
});